﻿@{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

<address>
    One Microsoft Way<br />
    Redmond, WA 98052-6399<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong> <a href="mailto:Support@example.com">Support@example.com</a><br />
    <strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: Consolas;
    }
</style>
@*<div class="row">
        <div class="col-6">
            <p class="col-12">
                <textarea style="width:100%;height:200px" data-bind="value:content,event:{keyup:contentChanged}"></textarea>
            </p>
            <span>u can enter <strong data-bind="text:wordsLeft">140</strong> words.</span>
            <button class="btn btn-success f-r" style="float:right" data-bind="click:sendMessage">Send</button>
        </div>
        <div class="col-6" style="margin-top:20px;" data-bind="foreach:messages">
            <div class="col-12" style="border:solid 1px #ddd;padding:10px;margin-bottom:5px;">
                <b data-bind="text:userId">Tom</b>
                <p data-bind="text:content">message content</p>
                <i>Is sent at <strong data-bind="text:createDate"></strong></i>
            </div>
        </div>
    </div>*@
<div class="row">
    @*<div class="col-6">
            <div class="page">
                <div class="header">
                    <h1>Knockout review.</h1>
                </div>
                <div class="body">
                    <select data-bind="options:grades,optionsText:'name',optionsCaption:'选择...',value:grade"></select>
                    <span data-bind="text:grade.name"></span>
                    <span data-bind="with:grade">
                        <select data-bind="options:subjects,optionsText:'name',value:$parent.subject"></select>
                    </span>
                    <span data-bind="text:subject.name"></span>
                </div>
            </div>
        </div>*@
    @*<div class="col-6">
            <div class="page">
                <header>Ko.Validation</header>
                <main>
                    <form>
                        <input type="text" data-bind="value:uName" />
                        <input type="password" data-bind="value:pwd" />
                        <input type="submit" data-bind="click:register" value="提交" />
                    </form>
                </main>
                <footer>
                    &copy;2019
                </footer>
            </div>
        </div>*@
    <div class="col-6">
        <div class="page">
            <header>Template.</header>
            <main>
                <table data-bind="template:{name:'tmp',foreach:items}"></table>
            </main>
            <footer>
                &copy;2019
            </footer>
        </div>
    </div>
</div>
<script type="text/html" id="tmp">
    <tr>
        <td data-bind="text:id"></td>
        <td data-bind="text:name"></td>
    </tr>
</script>
@section scripts{
    <script src="~/lib/knockout-latest.js"></script>
    <script src="~/lib/knockout.validation.min.js"></script>
    <script src="~/lib/signalr.min.js"></script>
    @*<script type="text/javascript">
            var Message = function (userId, content) {
                var self = this;
                self.userId = userId;
                self.content = content;
                self.createDate = new Date();
            };

            var Vm = function () {
                var self = this;
                self.content = ko.observable('');
                self.wordsLeft = ko.observable(140);
                self.contentChanged = function () {
                    var len = self.content().length;
                    var left = 140 - len;
                    self.wordsLeft(left);
                };
                self.messages = ko.observableArray([]);
                self.sendMessage = function () {
                    self.messages.push(new Message('gainorloss', self.content()));
                }
            };
            $(function () {
                var vm = new Vm();
                ko.applyBindings(vm);
            });
        </script>*@
    <script type="text/javascript">
        //var Vm = function () {
        //    var self = this;
        //    self.grades = [
        //        {
        //            id: 0,
        //            name: '大学',
        //            subjects: [{ id: 1, name: '大学英语' }]
        //        }, {
        //            id: 1,
        //            name: '中学',
        //            subjects: [{ id: 2, name: '语文' }, { id: 3, name: '数学' }]
        //        }
        //    ];
        //    self.grade = ko.observable();
        //    self.subject = ko.observable();
        //}
        //var vm = new Vm();
        //ko.applyBindings(vm);

        //ko.validation.configure({
        //    registerExtenders: true,
        //    insertMessages: true
        //});
        //var User = function () {
        //    var self = this;
        //    self.uName = ko.observable().extend({
        //        required: {
        //            message: '请输入用户名',
        //            params: true
        //        },
        //        minLength: {
        //            params: 6,
        //            message: '最少长度为6'
        //        }
        //    });
        //    self.pwd = ko.observable().extend({
        //        required: {
        //            message: '请输入密码',
        //            params: true
        //        }
        //    });
        //    self.register = function () {
        //        if (self.errors().length > 0) {
        //            self.errors.showAllMessages();
        //        } else {
        //        }
        //    }
        //}
        //var user = new User();
        //ko.applyBindings(user);
    </script>
    <script type="text/javascript">
        var items = [];
        for (var i = 0; i < 10; i++) {
            items.push({ id: i, name: 'gainorloss' + i });
        }
        var Vm = function () {
            var self = this;
            self.items = ko.observableArray(items);
        };
        var vm = new Vm();
        ko.applyBindings(vm);
        $.when($.ajax({
            url: '',
            data: '',
        })).done(function () {

        });
    </script>
}